<template>
  <Table border :columns="columns" :data="data">
    <slot slot="footer">
      <!--<Button style="margin-left: 20px" type="primary" @click="addAttr" icon="plus">添加属性</Button>-->
    </slot>
  </Table>
</template>

<script>
export default {
  name: 'propertyTable',
  props: {
    data: Array
  },
  data () {
    return {
      columns: [
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center'
        },
        {
          title: '字段名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '操作',
          key: 'parameter',
          align: 'center',
          width: 250,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.editAttr(params.row, params.index)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.deleteAttr(params.index)
                  }
                }
              }, '删除')
            ])
          }
        }
      ]
    }
  },
  methods: {
    editAttr (data, index) {
      console.log(index)
      this.$emit('editInfo', data, index)
    },
    deleteAttr (index) {
      this.$emit('deleteInfo', index)
    }
  }
}
</script>

<style scoped>

</style>
